<template>
  <!-- 组件说明：
        1.组件布局
    <el-form>
      <el-row>
        <el-col>
          <el-form-item>
            <el-input></el-input>或<el-select></el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
        2.数据绑定：
        （1）所有input和select绑定的数据都在data的from中
        （2）data中的list与本组件的级联选择器绑定
        （3）options是级联选择器的选项
        （4）剩余两个option分别与其他选择器绑定
        3.方法调用：
        本组件只使用了一个方法，与提交按钮绑定。如果与后端相连则会根据返回值跳转页面 -->
  <div>
    <el-card style="width: 100%; height: 600px">
      <el-row>
        <el-steps :active="active" finish-status="success">
          <el-step title="基础信息"> </el-step>
          <el-step title="癌病信息"></el-step>
          <el-step title="抽烟信息"></el-step>
          <el-step title="服用药物信息"></el-step>
          <el-step title="性病信息"></el-step>
          <el-step title="完成"></el-step>
        </el-steps>
      </el-row>
      <br /><br />
      <el-row>
        <el-tabs tab-position="left" style="height: 400px" v-model="active">
          <el-tab-pane label="基础信息" @click="next">
            <span>基础信息</span><br /><br />
            <span>请输入年龄:</span>
            <el-input
              placeholder="请输入年龄"
              v-model="form.age"
              style="width: 300px; margin-left: 17px"
            ></el-input
            ><br /><br />
            <span>请输入性伴侣数量:</span>
            <el-input
              placeholder="请输入性伴侣数量"
              v-model="form.num_sexual_partners"
              style="width: 300px; margin-left: 17px"
            ></el-input
            ><br /><br />
            <span>第一次性交（年龄）:</span
            ><el-input
              placeholder="第一次性交（年龄）"
              v-model="form.first_sexual"
              style="width: 300px; margin-left: 17px"
            ></el-input
            ><br /><br />
            <span>怀孕次数:</span
            ><el-input
              placeholder="怀孕次数"
              v-model="form.num_pregnancies"
              style="width: 300px; margin-left: 17px"
            ></el-input>
          </el-tab-pane>

          <el-tab-pane label="癌病信息" @click="next">
            <span>癌病信息</span><br /><br />
            <span>是否患有癌症:</span>
      <el-input placeholder="（0：没有，1：有）" v-model="form.Cancer" style="width:30%; margin-left: 17px"></el-input><br><br>
                  <span>是否患有CIN:</span>
      <el-input placeholder="（0：没有，1：有）" v-model="form.CIN" style="width:30%; margin-left: 17px"></el-input><br><br>
                  <span>是否患有HPV:</span>
      <el-input placeholder="（0：没有，1：有）" v-model="form.HPV" style="width:30%; margin-left: 17px"></el-input>
          </el-tab-pane>

                    <el-tab-pane label="抽烟信息" @click="next">
            <span>抽烟信息：</span><br /><br />
            <span>是否抽烟：</span>
      <el-select placeholder="抽烟" v-model="form.is_smoke">
        <el-option
          v-for="item in smokeoption"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select><br><br>
      <span>烟龄（年）</span>
      <el-input placeholder="烟龄（年）" v-model="form.smoke_age"  style="width:30%; margin-left: 17px"></el-input><br><br>
      <span>每年抽抽多少包（包/年）：</span>
      <el-input
        placeholder="每年抽抽多少包（包/年）"
        v-model="form.num_smoke"
        style="width: 33%; margin-left: 17px"
      ></el-input>
          </el-tab-pane>

          <el-tab-pane label="服用药物信息" @click="next">
            <span>服用药物信息</span><br /><br />
            <span>是否服用过荷尔蒙避孕药:</span>
      <el-input
        placeholder="荷尔蒙避孕药（0：没有，1：有）"
        v-model="form.is_hormonal_contraceptives"
         style="width: 33%; margin-left: 17px"
      ></el-input><br><br>
         <span>荷尔蒙避孕药龄:</span>
      <el-input
        placeholder="荷尔蒙避孕药龄"
        v-model="form.age_hormonal_contraceptives"
        style="width: 33%; margin-left: 17px"
      ></el-input><br><br>
         <span>是否佩戴过宫内节孕器：（0：没有，1：有）</span>
            <el-input placeholder="宫内节孕器" v-model="form.is_IUD"   style="width: 33%; margin-left: 17px"></el-input><br><br>
            <span>佩戴节孕器实时间：</span>
      <el-input
        placeholder="佩戴节孕器几年"
        v-model="form.IUD_ages"
        style="width: 33%; margin-left: 17px"
      ></el-input>
          </el-tab-pane>

          <el-tab-pane label="性病信息" @click="next">
            <span>性病信息</span><br /><br />
            <span>经过诊断次数：</span>
      <el-input
        v-model="form.sexfrom.Number_of_diagnosis"
        placeholder="诊断次数"
                style="width: 35%; margin-left: 17px"
      ></el-input>
      <br><br>
      <span>自首次诊断以来的时间：</span>
      <el-input
        v-model="form.sexfrom.Time_since_first_diagnosis"
        placeholder="自首次诊断以来的时间"
        style="width: 35%; margin-left: 17px"
      ></el-input><br><br>
      <span>自去年以来的时间诊断：</span>
      <el-input
        v-model="form.sexfrom.Time_since_last_diagnosis"
        placeholder="自去年以来的时间诊断"
                style="width: 35%; margin-left: 17px"
      ></el-input><br><br>
      <span>请选择具体的信息：</span>
      <el-cascader
        :options="options"
        :props="props"
        collapse-tags
        clearable
        size="medium;"
        style="margin-left: 17px"
        v-model="form.list"
      />
          </el-tab-pane>

          <el-tab-pane label="完成" @click="next">
            <br>
            <span style=" margin-top: 45px; margin-left: 17px">您已完成信息填写，赶快提交来看一下预测结果吧</span>
            <br><br>
            <el-button @click="open"  style="margin-top: 12px;margin-left: 170px">提交</el-button>
          
          </el-tab-pane>


        
        </el-tabs>
      </el-row>
    </el-card>
  
 
  </div>
</template>

<script>
import axios from "axios";
import { Message, MessageBox } from "element-ui";

export default {
  data() {
    return {
      active: 0,
      sex_num: 0,
      is_post: 1,

      form: {
        age: "",
        num_sexual_partners: "",
        first_sexual: "",
        num_pregnancies: "",
        is_smoke: "",
        smoke_age: "",
        num_smoke: "",
        is_hormonal_contraceptives: "",
        age_hormonal_contraceptives: "",
        is_IUD: "",
        IUD_ages: "",
        STD: "",
        CIN: "",
        HPV: "",
        Cancer: "",
        sexfrom: {
          Number_of_diagnosis: "",
          Time_since_first_diagnosis: "",
          Time_since_last_diagnosis: "",
        },
        list: [],
      },
      props: { multiple: true },
      options: [
        // 1
        {
          value: "1",
          label: "尖锐湿疣",
          children: [
            {
              value: "1",
              label: "有",
            },
            {
              value: "0",
              label: "没有",
            },
            {
              value: "?",
              label: "不知道",
            },
          ],
        },
        // 2
        {
          value: "2",
          label: "宫颈湿疣",
          children: [
            {
              value: "1",
              label: "有",
            },
            {
              value: "0",
              label: "没有",
            },
            {
              value: "?",
              label: "不知道",
            },
          ],
        },
        // 3
        {
          value: "3",
          label: "阴道尖锐湿疣",
          children: [
            {
              value: "1",
              label: "有",
            },
            {
              value: "0",
              label: "没有",
            },
            {
              value: "?",
              label: "不知道",
            },
          ],
        },
        // 4
        {
          value: "4",
          label: "外阴 - 会阴性湿疣",
          children: [
            {
              value: "1",
              label: "有",
            },
            {
              value: "0",
              label: "没有",
            },
            {
              value: "?",
              label: "不知道",
            },
          ],
        },
        // 5
        {
          value: "5",
          label: "梅毒",
          children: [
            {
              value: "1",
              label: "有",
            },
            {
              value: "0",
              label: "没有",
            },
            {
              value: "?",
              label: "不知道",
            },
          ],
        },
        // 6
        {
          value: "6",
          label: "盆腔炎",
          children: [
            {
              value: "1",
              label: "有",
            },
            {
              value: "0",
              label: "没有",
            },
            {
              value: "?",
              label: "不知道",
            },
          ],
        },
        // 7
        {
          value: "7",
          label: "生殖器疱疹",
          children: [
            {
              value: "1",
              label: "有",
            },
            {
              value: "0",
              label: "没有",
            },
            {
              value: "?",
              label: "不知道",
            },
          ],
        },
        // 8
        {
          value: "8",
          label: "传染性软疣",
          children: [
            {
              value: "1",
              label: "有",
            },
            {
              value: "0",
              label: "没有",
            },
            {
              value: "?",
              label: "不知道",
            },
          ],
        },
        // 9
        {
          value: "9",
          label: "艾滋病",
          children: [
            {
              value: "1",
              label: "有",
            },
            {
              value: "0",
              label: "没有",
            },
            {
              value: "?",
              label: "不知道",
            },
          ],
        },
        // 10
        {
          value: "10",
          label: "HIV",
          children: [
            {
              value: "1",
              label: "有",
            },
            {
              value: "0",
              label: "没有",
            },
            {
              value: "?",
              label: "不知道",
            },
          ],
        },
        // 11
        {
          value: "11",
          label: "HPV",
          children: [
            {
              value: "1",
              label: "有",
            },
            {
              value: "0",
              label: "没有",
            },
            {
              value: "?",
              label: "不知道",
            },
          ],
        },
        // 12
        {
          value: "12",
          label: "HPV",
          children: [
            {
              value: "1",
              label: "有",
            },
            {
              value: "0",
              label: "没有",
            },
            {
              value: "?",
              label: "不知道",
            },
          ],
        },
      ],
      smokeoption: [
        { value: 0, label: "不抽烟" },
        { value: 1, label: "抽烟" },
      ],
      sexoption: [
        { value: 0, label: "没有" },
        { value: 1, label: "有" },
      ],
    };
  },
  methods: {
        next(){
      if (this.active++ > 6) this.active = 0;
    },


    open() {
      MessageBox.confirm("请提交前确认已经填写好所有数据", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          Message.success("提交成功!");

          await axios
            .post(
              "/api/21post",
              JSON.stringify(this.form),
              console.log("传输的数据是"),
              console.log(this.form)
            )
            .then(() => {
              axios.get("/api/21get").then((Response) => {
                console.log("响应的数据是");
                console.log(Response.data);
                this.$store.commit("heart_statu_save", Response.data);

                if (Response.data == 1) {
                  this.$router.push("/gja_ill");
                  console.log("执行跳转1");
                }
                if (Response.data == 0) {
                  this.$router.push("/gja_not_ill");
                  console.log("执行跳转0");
                }
              });
            })
            .catch(function (error) {
              console.log(error);
            });
        })
        .catch(() => {
          Message.info("已取消提交");
        });
    },
  },
};
</script>

<style>
.el-cascader-menu {
  height: 150px;
}
</style>